{% extends "base/front_micro.html" %}

{% block head %}
    <link rel="stylesheet" href="/static/css/clipper.css" type="text/css" />
{% endblock %}

{% block Jquery %}
    <script type="text/javascript" src="/static/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/static/js/cropbox.js"></script>
{% endblock %}

{% block container %}
        <div class="imageBox">
            <div class="thumbBox">
            </div>
            <div class="spinner" style="display: none">
                Loading...</div>
        </div>
        <div class="action">
            <!-- <input type="file" id="file" style=" width: 200px">-->
            <div class="new-contentarea tc">
                <a href="javascript:void(0)" class="upload-img">
                    <label for="upload-file">
                        选择图像</label>
                </a>
                <input type="file" class="" name="upload-file" id="upload-file" />
            </div>
            <input type="button" id="btnSubmit" class="Btnsty_peyton" value="上传" />
            <input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切" />
            <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+" />
            <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" />
        </div>
        <div class="cropped">
        </div>
{% endblock %}

{% block script %}
    <script type="text/javascript">
        $(window).load(function () {
            var options =
	            {
	                thumbBox: '.thumbBox',
	                spinner: '.spinner',
	                imgSrc: '/static/img/clipper.png'
	            }
            var cropper = $('.imageBox').cropbox(options);
            $('#upload-file').on('change', function () {
                var reader = new FileReader();
                reader.onload = function (e) {
                    options.imgSrc = e.target.result;
                    cropper = $('.imageBox').cropbox(options);
                }
                reader.readAsDataURL(this.files[0]);
                this.files = [];
            })
            $('#btnCrop').on('click', function () {
                var img = cropper.getDataURL();
                $('.cropped').html('');
                $('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
                $('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
                $('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');

            })
            $('#btnZoomIn').on('click', function () {
                cropper.zoomIn();
            })
            $('#btnZoomOut').on('click', function () {
                cropper.zoomOut();
            })
            $('#btnSubmit').on('click', function () {
                $('#circularG').show();
                var img = cropper.getDataURL().replace('data:image/png;base64,', '');
                var url = '{{ url_for("upload.UploadClipperAvatar") }}';
                var data = {
                    action: "add",
                    picStr: img
                };
                $.ajax(url, {
                    type: 'post',
                    data: data,
                    success: function (data) {
                        $('#circularG').hide();
                        console.log(data);
                        if (data.success==true) {
                            layer.msg("修改头像成功", {icon: 1, time: 3*1000});
                            parent.location.reload();
                        } else {
                            layer.alert("修改头像失败，请重试提交或报告错误！\n错误原因是：" + data.msg, {icon: 2, time: 15*1000});
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {

                    }
                });
            })
            $('#btnGetAvatar').on('click', function () {
                var url = '{{ url_for("upload.UploadClipperAvatar") }}';
                var data = {
                    action: "get"
                };
                $.ajax(url, {
                    type: 'post',
                    data: data,
                    success: function (data) {
                        $("#avatarimg").append('<img src="data:image/png;base64,' + data + '" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {

                    }
                });
            })
        });
    </script>
    <div style="text-align: center; margin: 50px 0; font: normal 14px/24px 'MicroSoft YaHei';">
    </div>
    <div id="circularG" style=" display:none">
        <div id="circularG_1" class="circularG">
        </div>
        <div id="circularG_2" class="circularG">
        </div>
        <div id="circularG_3" class="circularG">
        </div>
        <div id="circularG_4" class="circularG">
        </div>
        <div id="circularG_5" class="circularG">
        </div>
        <div id="circularG_6" class="circularG">
        </div>
        <div id="circularG_7" class="circularG">
        </div>
        <div id="circularG_8" class="circularG">
        </div>
    </div>
{% endblock %}
